<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>体育学院核酸检测信息收集</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://lib.baomitu.com/axios/0.26.1/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://lib.baomitu.com/element-ui/2.15.7/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://lib.baomitu.com/element-ui/2.15.7/index.js"></script>
    <!-- cos腾讯云对象存储 -->
    <script src="https://zgx949-1251354949.cos.ap-nanjing.myqcloud.com/cos-js-sdk-v5.min.js"></script>
    <style>
        /* * {
            margin: 0;
            padding: 0;
        } */

        body {
            font: 15px/1.3 'Open Sans', sans-serif;
            color: #5e5b64;
            text-align: center;
        }

        a,
        /* a:visited {
            outline: none;
            color: #389dc1;
        } */
        /* a:hover {
            text-decoration: none;
        } */

        section,
        footer,
        header,
        aside,
        nav {
            display: block;
        }
        /*-------------------------
            菜鸟
        --------------------------*/

        nav {
            display: inline-block;
            margin: 0px auto 45px;
            background-color: #5597b4;
            box-shadow: 0 1px 1px #ccc;
            border-radius: 2px;
        }

        nav a {
            display: inline-block;
            padding: 18px 30px;
            color: #fff !important;
            font-weight: bold;
            font-size: 16px;
            text-decoration: none !important;
            line-height: 1;
            text-transform: uppercase;
            background-color: transparent;
            -webkit-transition: background-color 0.25s;
            -moz-transition: background-color 0.25s;
            transition: background-color 0.25s;
        }

        nav a:first-child {
            border-radius: 2px 0 0 2px;
        }

        nav a:last-child {
            border-radius: 0 2px 2px 0;
        }

        nav.home .home,
        nav.projects .projects,
        nav.services .services,
        nav.contact .contact {
            background-color: #e35885;
        }

        p {
            font-size: 22px;
            font-weight: bold;
            color: #7d9098;
        }

        p b {
            color: #ffffff;
            display: inline-block;
            padding: 5px 10px;
            background-color: #c4d7e0;
            border-radius: 2px;
            text-transform: uppercase;
            font-size: 18px;
        }

        .box-card {
            margin: 10px;
        }
    </style>

</head>

<body>

    <div id="main">

        <!-- 激活的菜单样式为  active 类 -->
        <!-- 为了阻止链接在点击时跳转，我们使用了 "prevent" 修饰符 (preventDefault 的简称)。 -->

        <nav v-bind:class="active" v-on:click.prevent>

            <!-- 当菜单上的链接被点击时，我们调用了 makeActive 方法, 该方法在 Vue 实例中创建。 -->

            <a href="#" class="home" v-on:click="makeActive('home')">核酸检测</a>

            <a href="#" class="services" v-on:click="makeActive('services');window.open('http://stu.lefthand.top/admin')">后台管理</a>
            <a href="#" class="contact" v-on:click="makeActive('contact');alert('社体202左手')">关于系统</a>
        </nav>
        <div v-show="done">
            <el-result icon="success" :title="'上报成功: 【' + className + '】' + name +', 愿早日解封然后见到TA'">
                <template slot="extra">
                    <el-button type="primary" size="medium" @click="history.back()">返回</el-button>
                </template>
            </el-result>
        </div>
        <!-- 以下 "active" 变量会根据当前选中的值来自动变换 -->
        <div v-show="!done">
            <el-card class="box-card">
                <p>体育学院<br><b>核酸检测信息收集</b></p>
            </el-card>
            <el-card class="box-card">

                <el-form label-width="80px">
                    <el-form-item label="活动：">
                        <el-select v-model="actid" placeholder="请选择活动">
                            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="学号：">
                        <el-input v-model="username" placeholder="7位数例：0200932"></el-input>
                    </el-form-item>

                    <el-form-item label="图片：">
                        <el-upload list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-success="uploaded" :http-request="upload">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" icon="el-icon-check" @click="submit">点我早日解封</el-button>
                    </el-form-item>

                </el-form>

            </el-card>
        </div>
    </div>

    <script>
        const cos = new COS({
                SecretId: 'AKIDWsy85nEOIwJPDk0zh7HBo9E2ZYHkwrUr', // 身份识别ID
                SecretKey: '7xVnoXz94j7F7i24qKXS7VcS0HJ4ZolR' // 身份秘钥
            })
            // var baseUrl = 'http://ty.lefthand.top'
        var baseUrl = 'http://127.0.0.1:8000'

        function dateFormat(fmt, date) {
            let ret;
            const opt = {
                "Y+": date.getFullYear().toString(), // 年
                "m+": (date.getMonth() + 1).toString(), // 月
                "d+": date.getDate().toString(), // 日
                "H+": date.getHours().toString(), // 时
                "M+": date.getMinutes().toString(), // 分
                "S+": date.getSeconds().toString() // 秒
                    // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
                };
            };
            return fmt;
        }
        // 创建一个新的 Vue 实例
        var demo = new Vue({
            // DOM 元素，挂载视图模型
            el: '#main',

            // 定义属性，并设置初始值
            data: {
                actid: 0,
                options: [],
                username: '',
                img: '',
                active: 'home',
                dialogImageUrl: '',
                dialogVisible: false,
                done: false,
                className: '',
                name: ''
            },

            // 点击菜单使用的函数
            methods: {
                submit() {
                    if (this.actid === 0) {
                        this.$message({
                            type: "error",
                            message: "当前无活动！"
                        })
                        return
                    }
                    if (!this.username) {
                        this.$message({
                            type: "error",
                            message: "请填写学号！"
                        })
                        return
                    }
                    if (!this.img) {
                        this.$message({
                            type: "error",
                            message: "请填上传图片！"
                        })
                        return
                    }
                    if (localStorage.getItem("lastsubmit") === dateFormat("YYYY-mm-dd", new Date())) {
                        this.$message({
                            type: "error",
                            message: "今日已上传过，如有特殊原因请联系班长！"
                        })
                        return
                    }
                    localStorage.setItem('idcard', this.username);

                    // location.href = encodeURI(`../activities/checkLog?stu_card=${this.username}&url=${this.img}&aid=${this.actid}`)
                    axios.get(`${baseUrl}/activities/checkLog?stu_card=${this.username}&url=${this.img}&aid=${this.actid}`).then(res => {
                        if (res.data.code === 1) {
                            this.done = true
                            this.className = res.data.data.classname;
                            this.name = res.data.data.name;

                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.msg
                            })
                        }
                    })
                },
                makeActive: function(item) {
                    // 模型改变，视图会自动更新
                    this.active = item;
                },
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePictureCardPreview(file) {
                    // this.dialogImageUrl = file.url;
                    this.dialogImageUrl = `https:${file.Location}`;
                    this.dialogVisible = true;
                },
                uploaded(response, file, fileList) {
                    console.log(response.url);
                    this.img = response.url;
                },
                upload(params) {
                    //   console.log(params)
                    if (params.file) {
                        cos.putObject({
                            Bucket: 'ty-1251354949',
                            /* 存储桶 */
                            Region: 'ap-guangzhou',
                            /* 存储桶所在地域，必须字段 */
                            Key: params.file.name,
                            /* 文件名 */
                            StorageClass: 'STANDARD', // 上传模式, 标准模式
                            Body: params.file // 上传文件对象
                        }, (err, data) => {
                            console.log(err || data)
                            if (data.statusCode === 200) {
                                this.imageUrl = `https:${data.Location}` //写到这,图片已经可以看到啦
                                console.log(data.Location)
                                this.img = `https:${data.Location}`
                            }
                        })
                    }
                }

            },
            mounted() {
                this.username = localStorage.getItem('idcard');
                axios.get(`${baseUrl}/act`).then(res => {
                    this.options = res.data;
                    this.actid = this.options[0].id;
                })
            }

        });
    </script>
</body>

</html>